<template>
  <div class="main">
    <SearchHeader></SearchHeader>
    <div class="book">
      <div class="b-base">
        <div class="b-cover">
          <img :src="book.cover" :alt="book.name" srcset=""/>
        </div>
        <div class="b-info">
          <div class="b-name">{{ book.name }}</div>
          <div>作者：{{ book.author }}</div>
          <div>分类：{{ getClassifyName(book.classifyId) }}</div>
          <div>状态：{{ book.status | getStatusName }}</div>
        </div>
      </div>

      <div class="b-berief">
        <div class="b-sub-title">内容简介</div>
        <div class="b-b-con">{{book.brief}}</div>
      </div>
      <div class="b-category" v-if="book.canReadOnLine">
        <div v-if="categoryList.length > 0">
          <div class="b-sub-title">章节信息</div>
          <div class="b-c-list">
            <div class="b-c-title" v-for="(category,index ) in categoryList" :key="index" @click="goCategory(category)">{{ category.title}}</div>
          </div>
        </div>
        <div v-else>
          <div class="b-sub-title">暂无章节信息，请联系管理员<a :href="'mailto:'+commonData.email">{{commonData.email}}</a></div>
        </div>
      </div>
      <div v-else-if="!book.canReadOnLine" class="b-download">
        <div class="tip">我们强烈支持正版，强烈支持用户上京东、亚马逊、当当上购买正版书籍。本下载链接只提供给需要的人。请严格遵守以下约定：</div>
        <div class="agreement">本书籍只用于学习交流，请不要随意传播，请下载后24小时内删除。</div>
        <a class="b-do-link" :href="downloadPath" :download="originBookName">点击下载</a>
        <span class="code" v-if="book.downloadCode">{{ '验证码：' + book.downloadCode }}</span>
        <!-- <van-button type="info" @click="downloadFile" class="b-do-btn">点击下载</van-button> -->
      </div>
    </div>
    <!-- <Footer></Footer> -->
  </div>
</template>
<script>
import SearchHeader from '@/components/SearchHeader'
// import Footer from '~/components/Footer'
export default {
  name:'Book',
  components:{
    SearchHeader,
    // Footer
  },
  async asyncData(ctx) {
    try{
      // data 相关字段
      let bookId = ctx.query.bookId
      // 获取图书分类
      let classifyList = await ctx.$axios.get('/api/classify')
      // 获取图书信息
      let book =  await ctx.$axios.get('/api/getBookById?id=' + bookId)
      // 获取章节信息
      let categoryList = await ctx.$axios.get('/api/getAllCategoryTitle?bid=' + bookId)
      // 带扩展名的书籍名称
      let originBookName = book.path.slice(book.path.indexOf(book.name))
      return {
        bookId,
        classifyList,
        book,
        categoryList,
        originBookName
      } 
    }catch(err){
      ctx.$errorHandler(err)
    }
  },
  head(){
    return {
      title:this.book.name,
      meta:[
        {hid:'description',name:'description',content:`${ this.book.name }:${ this.book.brief }`},
        {name:'keywords',content:`${this.book.name+',免费在线阅读,电子书下载'},${this.book.author}`}
      ]
    }
  },
  data(){
    return {
      bookId:this.$route.query.bookId,
      classifyList:[],
      book:{
        cover:''
      },
      categoryList:[],
      originBookName:'',
      agree:''
      
    }
  },
  filters:{
    getStatusName(val){
      return val === 0 ? '连载中' : '已完成'
    }

  },
  computed:{
    downloadPath(){
      // 以http开头为外网地址
      if(this.book.path.indexOf('http://')>-1 || this.book.path.indexOf('https://')>-1){
        return this.book.path
      }else{
        let baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:7001' : 'http://localhost:7001:7001'
        return baseUrl+'/api/downloadBook?bookPath='+encodeURIComponent(this.book.path)+'&bookName='+encodeURIComponent(this.book.name)
      }
    }
  },
  created() {
    // 点击量价1
    this.$axios.get('/api/addBookCvById?id='+this.bookId)
    
  },
  mounted() {
    uMengTj('书籍页','浏览',this.book.name)
  },
  methods: {
    goCategory(category){
      this.$router.push({path:'/category', query : { bookId: this.bookId, categoryId: category.id, bookName:this.book.name}})
    },
    getClassifyName(val){
      let target = this.classifyList.find(item=>{
        return item.id === val
      })
      return target && target.name
    },
    downloadFn(){
      return false
    }
    // downloadFile(){
    //   // 下载文件
    //   // console.log('book:',this.book)
    //   // console.log('下载')
    //   this.$axios.post('/api/downloadBook',{name:this.book.name,path:this.book.path}).then(res=>{
    //     // console.log('res:',res)
    //     let blob = new Blob([res])
    //     let reader = new FileReader()
    //     let downloadName = this.book.path.slice(this.book.path.indexOf(this.book.name))
    //     reader.readAsDataURL(blob)
    //     reader.onload = (e)=>{
    //       let a = document.createElement("a");
    //       a.download = downloadName;
    //       a.href = e.target.result;
    //       document.body.appendChild(a)
    //       a.click()
    //       document.body.removeChild(a)
    //     }
    //   })
    // }
  },
}
</script>
<style lang="scss" scoped>
.main{
  
  font-size: 14px;
  text-align: left;
  padding-bottom:20px;
  .book{
    background: #e8e8e8;
    .b-base{
      background: white;
      padding:20px 12.5px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .b-cover{
        width: 100px;
        height: 150px;
        img{
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .b-info{
        margin-left: 10px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        color:#888;
        line-height: 1.5;
        text-align: left;
        .b-name{
          font-size: 16px;
          color:black;
          
        }
      }
    }
    .b-sub-title{
      font-size: 16px;
      color: black;
      margin: 10px 0px;
    }
    .b-berief{
      margin-top:10px;
      padding:20px 12.5px;
      box-sizing: border-box;
      background: white;
      color:#888;
    }
    .b-category{
      margin-top:10px;
      padding:20px 12.5px;
      box-sizing: border-box;
      background: white;
      color:#888;
      .b-c-list{
        .b-c-title{
          width: 80%;
          height: 30px;
          line-height: 30px;
          margin-top:5px;
          color: black;
          text-decoration: underline;
          &:hover{
            color:red;
            cursor: pointer;
          }
        }
      }
    }
    .b-download{
      margin-top:10px;
      padding:20px 12.5px;
      box-sizing: border-box;
      background: white;
      color:#888;
      .tip{
        margin-top:10px;
      }
      .agreement{
        color:red;
        margin-top:10px;
      }
      .b-do-link{
        display: inline-block;
        margin-top: 10px;
      }
      .code{
        margin-right: 20px;
      }
    }
  }
}
</style>